<script setup>
import { onMounted, ref } from 'vue';
import {useRoute, useRouter} from 'vue-router'
const props = defineProps(['drawer'])
const route = useRoute();
const userInfo = JSON.parse(localStorage.getItem("ZAYY_USER_INFO"))
const menuInfo = JSON.parse(localStorage.getItem("ZAYY_USER_INFO")).menuInfo

const systemMenuList = ref([]);
// const systemMenuList = ref([
//     {
//         icon: "mdi-account",
//         menu_name: "用户管理",
//         path: '/users'
//     },
//     {
//         icon: "mdi-book-account",
//         menu_name: "字典分类管理",
//         path: '/role'
//     },
//     {
//         icon: "mdi-book",
//         menu_name: "字典管理",
//         path: '/sysDict'
//     },
//     {
//         icon: "mdi-account-tie",
//         menu_name: "裁判管理",
//         path: '/bas'
//     },
//     {
//         icon: "mdi-sword-cross",
//         menu_name: "攻方企业管理",
//         path: '/attackCompany'
//     },
//     {
//         icon: "mdi-shield-sword",
//         menu_name: "防守方企业管理",
//         path: '/defendCompany'
//     },
//     {
//         icon: "mdi-clock-start",
//         menu_name: "活动管理",
//         path: '/activity'
//     },
//     {
//         icon: "mdi-list-box",
//         menu_name: "攻防记录管理",
//         path: '/list'
//     }
// ]);
const gridMenuList = ref([]);
const fireMenuList = ref([]);
const warningMenuList = ref([]);
const opinionList = ref([]);
const windowList = ref([]);

onMounted(() => {
    // menuInfo.forEach(item => {
    //     if(item.parent_id == 0) {
    //         systemMenuList.value.push(item)
    //     }
    //     if(item.parent_id == 1) {
    //         gridMenuList.value.push(item)
    //     }
    //     if(item.parent_id == 2) {
    //         fireMenuList.value.push(item)
    //     }
    //     if(item.parent_id == 3) {
    //         warningMenuList.value.push(item)
    //     }
    //     if(item.parent_id == 4) {
    //         opinionList.value.push(item)
    //     }
    //     if(item.parent_id == 6) {
    //         windowList.value.push(item)
    //     }
    // })
})

function getType(type) {
    if(type == 1) {
        return '系统用户'
    }
    if(type == 2) {
        return '裁判'
    }
    if(type == 3) {
        return '参赛选手'
    }
    return '未知账号'
}

const router = useRouter();
function logout() {
    localStorage.removeItem('token')
    localStorage.removeItem('ZAYY_USER_INFO')
    router.push('/login?type=' + userInfo.userType)
}
</script>

<template>
    <v-navigation-drawer color="#333333" :permanent="true" v-model="props.drawer">
        <v-list color="primary" :nav="true" >
            <v-toolbar color="#333333">
                <!-- <v-btn icon="mdi-menu" variant="text"></v-btn> -->
                <v-toolbar-title>秀洲区攻防演练平台</v-toolbar-title>
            </v-toolbar>
            <v-list>
                <v-list-item
                    :prepend-avatar="userInfo.avatar ? userInfo.avatar: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
                    :title="userInfo.nickName"
                    :subtitle="getType(userInfo.userType)"
                >
                    <template v-slot:append>
                        <v-menu>
                            <template v-slot:activator="{ props }">
                                <v-btn
                                    icon="mdi-menu-down"
                                    size="small"
                                    variant="text"
                                    v-bind="props"
                                ></v-btn>                                
                            </template>
                            <v-list>
                                <v-list-item v-on:click="logout()" title="登出"></v-list-item>
                            </v-list>
                        </v-menu>
                    </template>
                </v-list-item>   
            </v-list>

            <v-divider></v-divider>
            <v-list-item title="首页" prepend-icon="mdi-home" to="/home"></v-list-item>

            <v-list-group v-for="menu in menuInfo" :value="menu.dictLabel">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" :prepend-icon="JSON.parse(menu.dictValue).icon" :title="menu.dictLabel"></v-list-item>          
                </template>
                <v-list-item v-for="item in menu.children" :prepend-icon="JSON.parse(item.dictValue).icon" :title="item.dictLabel" :to="JSON.parse(item.dictValue).path"></v-list-item>
            </v-list-group>

            <!-- <v-list-group value="网格化巡检">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-grid" title="网格化巡检"></v-list-item>
                </template>
                <v-list-item v-for="item in gridMenuList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
                <v-list-item prepend-icon="mdi-account-plus" title="拜访人信息" to="/visit"></v-list-item> 
            </v-list-group>

            <v-list-group value="消防巡检">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-fire-extinguisher" title="消防巡检"></v-list-item>
                </template>
                <v-list-item v-for="item in fireMenuList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
            </v-list-group>

            <v-list-group value="窗户巡检">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-dock-window" title="窗户巡检"></v-list-item>
                </template>
                <v-list-item v-for="item in windowList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
            </v-list-group>

            <v-list-group value="其他报警">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-bell-alert" title="其他报警"></v-list-item>
                </template>
                <v-list-item v-for="item in warningMenuList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
            </v-list-group>

            <v-list-group value="舆情管理">
                <template v-slot:activator="{ props }">
                    <v-list-item v-bind="props" prepend-icon="mdi-newspaper" title="舆情管理"></v-list-item>
                </template>
                <v-list-item v-for="item in opinionList" :prepend-icon="item.icon" :title="item.menu_name" :to="item.path"></v-list-item>
            </v-list-group> -->

        </v-list>
    </v-navigation-drawer>
    <v-main :scrollable="true">
        <router-view></router-view>
    </v-main>
</template>

<style scoped lang="scss">

</style>
